import React, { useEffect, useRef, useState } from 'react';
import io from "../../../node_modules/socket.io-client"
import { request } from 'umi';
import "./index.less"
export default function Index() {
  const [sock, setcock]: any = useState(null)
  const [value, setvalue] = useState("")
  let [arr, setarr] = useState<any[]>([])
  const scrollRef: any = useRef()
  const [img, setimg] = useState("https://img2.baidu.com/it/u=1742064249,2154824212&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
  const [username, setusername] = useState("qwer")
  function getdata() {
    request("http://localhost:3001/Xjq/getallchart").then((res: any) => {
      let newarr = JSON.parse(res[0].message)
      setarr(JSON.parse(JSON.stringify(newarr)))
      arr = newarr
      console.log(arr);
    })
  }
  useEffect(() => {
    getdata()
    let socket = io("http://localhost:8008")
    setcock(socket)
    socket.on("message", (data: any) => {
      console.log(data);
      arr.push(data.message)
      setimg(data.message.img)
      setusername(data.message.username)
      setarr(JSON.parse(JSON.stringify(arr)))
    })
  }, [])
  window.onload = () => {
    console.log(222);
    scrollFun()
  }
  useEffect(() => {
    // console.log(arr[arr.length-1].msg);
  }, [arr])
  const scrollFun = () => {
    console.log(scrollRef.current.scrollTop);
    // console.log(scrollRef.current.Height);
    scrollRef.current.scrollTop = scrollRef.current.scrollHeight + 100;
    // scrollRef
  }
  return <div>
    <h1>客服中心</h1>
    <div className='chart_Contentbox'>
      <div className='main_box'>
        <div className='users_list_left'>
          <ul>
            <li>
              <div className='users_item_img_box'>
                <img src={img} alt="" />
              </div>
              <div className='users_item_message'>
                <p className='user_name'>
                  {username}
                </p>
                <p className='user_cont'>
                  {/* {arr[arr.length-1].msg} */}
                  你好客服
                </p>
              </div>
              <div className='chart_time'>
                11:08
              </div>
            </li>
          </ul>
        </div>
        <div className='users_chart_msg_right'>
          <h3>{username}</h3>
          <div className='chart_content'>
            <div className='users_chart_msg_right_top'>
              <div ref={scrollRef}>
                <ul>
                  {arr.length > 0 && arr.map((item: any, index: number) => {
                    // console.log(item);
                    return (
                      <li className={item.sendid == 1002 ? "text-align-right" : ""} key={index}>
                        {
                          item.sendid == 1002 ? <div className='chart_item'>
                            <div className=''>
                              <p className='color_fff'>{item.msg}</p>
                            </div>
                            <div className='item_imgbox'>
                              <img src="https://img0.baidu.com/it/u=1122859762,2006579654&fm=253&fmt=auto&app=120&f=GIF?w=500&h=500" alt="" />
                            </div>
                          </div> : <div className='chart_item'>
                            <div className='item_imgbox'>
                              <img src={img} alt="" />
                            </div>
                            <div className=''>
                              <p>{username}</p>
                              <p className='color_fff'>{item.msg}</p>
                            </div>
                          </div>
                        }
                      </li>
                    )
                  })}
                </ul>
              </div>
            </div>
            <div className='users_chart_msg_right_bottom'>
              {/* <input type="textarea" onBlur={(e) => {
                // console.log(arr);
                setvalue(e.currentTarget.value)
              }} /> */}
              <textarea value={value} name="" id="" cols={30} rows={10} onChange={(e) => {
                setvalue(e.currentTarget.value)
              }}></textarea>
              <div className='send_btn'>
                <span onClick={() => {
                  if (value === "") {
                  } else {
                    request("http://localhost:3001/Xjq/setcharrtMsg", {
                      method: "get", params: {
                        userid: 1,
                        userid_end: 1002,
                        orderid: 1001,
                        msg: value,
                        time: 103,
                        type: 0
                      }
                    }).then((res: any) => {
                    })
                    sock.emit("message", {
                      data: {
                        userid: 1,
                        sendid: 1002,
                        orderid: 1001,
                        msg: value,
                        time: 103,
                        type: 0,
                        username: username,
                        img: "https://img2.baidu.com/it/u=1742064249,2154824212&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                      }
                    })
                  }
                  scrollFun()
                  setvalue("")
                }}>发送</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul></ul>
  </div>;
}
